<template>
  <div class="userdata">
    <head_>
      <h1>完善资料</h1>
    </head_>
    <div class="inp">
      <label for="username">头像</label>
      <van-uploader v-model="fileList" :max-count="1" accept=".jpg" :after-read="afterRead"/>
    </div>
    <div class="inp">
      <label for="username">账号用户名</label>
      <input type="text" placeholder="请输入账号用户名" id="username" v-model="userdata.username" />
    </div>
    <div class="inp">
      <label for="name">昵称</label>
      <input type="text" placeholder="请输入昵称" id="name" v-model="userdata.name" />
    </div>
    <div class="inp">
      <label for="licenseNo">驾照号码</label>
      <input type="text" placeholder="驾照号码" id="licenseNo" v-model="userdata.licenseNo" />
    </div>
    <div class="inp">
      <label for="idType">证件类型</label>
      <select name="idType" v-model="userdata.idType">
        <option value="1">居民身份证</option>
        <option value="2">护照</option>
        <option value="3">军官证</option>
      </select>
    </div>
    <div class="inp">
      <label for="idCard">证件号码</label>
      <input type="text" placeholder="证件号码" id="idCard" v-model="userdata.idNumber" />
    </div>

    <div class="inp">
      <label for="email">邮箱</label>
      <input type="text" placeholder="邮箱" id="email" v-model="userdata.email" />
    </div>
    <div class="submit">
      <button
        @click="submit"
        :disabled="submitdisplay"
        :class="[submitcolor == true ? 'submit_active' : '']"
      >提交</button>
    </div>
  </div>
</template>

<script>
//导入请求
import head_ from "../jingtai_/header";
import { userdataFun } from "../../request/userinfo/userinfo";
export default {
  props: {},
  data() {
    return {
      userdata: {},
      idrepw: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}(\d|x|X)$/, //身份证
      of: /^[0-9]{8}$/, //军官证
      passport: /^[a-zA-Z0-9]{5,17}$/, //护照
      licenseNorepw: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}(\d|x|X)$/, //驾照
      emailrepw: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
      submitdisplay: true,
      submitcolor: false,
      regphone: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
      regpw: /^[\w]{6,16}$/,
      bool: true,
      fileList: []
    };
  },

  created() {
    this.userdata.username = localStorage.getItem('loginAdmin');
    this.userdata = this.$store.state.user;
    this.fileList[0].url = this.userdata.headPic
    console.log(this.userdata)
    if (this.$store.state.user.idCard) {
      let idCard = this.userdata.idCard;
      this.userdata.idCard =
        idCard.substr(0, 5) + "******" + idCard.substr(-3);
    }
  },
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      // 此时可以自行将文件上传至服务器
      // console.log(file);
      const data = new FormData();
      data.append("file", file.file); //上传的是 File 对象
      //使用axios上传文件到服务器,注意设置axios的headers为{ "Content-Type": "multipart/form-data" }
      //因为Uploader组件result-type默认为dataUrl：结果包含 File 对象，以及文件对应的 base64 编码。所以FormData接收的参数应该是file.file,
      this.$http.post("/common/upload/sure",data).then(resp=>{
        this.userdata.headPic = resp.data.data;
        this.fileList[0].url = resp.data.data;
      })
    },
    eye_active() {
      this.flas = !this.flas;
    },
    eye_active2() {
      this.flas2 = !this.flas2;
    },
    // 表单验证
    submit() {
      console.log(this.userdata)
      // if (this.licenseNorepw.test(this.userdata.licenseNo) == false) {
      //   this.$toast.fail("请输入正确的驾照号");
      // } else if (this.emailrepw.test(this.userdata.email) == false) {
      //   this.$toast.fail("请输入正确的邮箱格式");
      // } else {
      if (this.userdata.idType==1){
        this.userdata.credentialsType='居民身份证';
      }else if (this.userdata.idType==2){
        this.userdata.credentialsType='护照';
      }else if (this.userdata.idType==3){
        this.userdata.credentialsType='军官证';
      }
      this.$http.put("/client/updateBy",this.userdata).then(result => {
          if (result.data.code===200) {
            this.$message.success(result.data.msg);
          }else {
            this.$message.error(result.data.msg);
          }
        })
    },
  },
  updated() {
    if (this.name != "" && this.username != "" && this.licenseNo != "") {
      this.submitdisplay = false;
      this.submitcolor = true;
    } else {
      this.submitcolor = false;
      this.submitdisplay = true;
    }
  },
  components: { head_ },
};
</script>

<style scoped lang="less">
.userdata {
  padding: 0 0.24rem;
  .title {
    display: flex;
    align-items: center;
    height: 0.88rem;
  }
  span {
    flex: 1;
    text-align: center;
    font-size: 0.34rem;
    font-weight: bolder;
  }
  .inp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.29rem;
    position: relative;
    label {
      font-size: 0.26rem;
      font-weight: bolder;
    }
    input,select {
      width: 5.48rem;
      height: 0.66rem;
      font-size: 0.22rem;
      padding-left: 0.19rem;
      border: 2px solid #e4e4e4;
      border-radius: 0.04rem;
      &::placeholder {
        color: #999;
      }
    }
    .van-icon-eye-o {
      position: absolute;
      top: 0.2rem;
      right: 0.19rem;
    }
    .eye_active {
      color: #2094ff;
    }
  }
  .submit {
    margin-top: 1.29rem;
    text-align: center;
    button {
      width: 3rem;
      height: 1rem;
      color: #999;
      background: #f2f2f2;
      font-size: 0.34rem;
      text-align: center;
      line-height: 1rem;
      border: none;
      outline: none;
    }
    .submit_active {
      background: #43a5ff;
      color: #fff;
    }
  }
}
</style>
